/*
 * @Author: your name
 * @Date: 2021-05-19 16:17:10
 * @LastEditTime: 2021-06-01 22:19:58
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: /xiangpan-admin/src/pages/home/index.tsx
 */
import Title from '@/components/title';
import { Button, Card, Divider, Modal, Space, message } from 'antd';
import React, { useState } from 'react';
import './index.less';
import { PlusOutlined } from '@ant-design/icons';
import AddRoomModal from './addRoom';
import { useRequest } from 'umi';
import {
  DeleteOutlined,
  LeftCircleFilled,
  RightCircleFilled,
} from '@ant-design/icons';
import { cancel_schedule, get_box_status } from '@/services/pages';
import _ from 'lodash';
import useObj from '@/use/useObj';
import CountDown from '@/components/countDown';
interface IProps {}

const Home = (props: IProps) => {
  const [obj, setObj] = useObj({
    refresh: null,
  });
  const [visible, setVisible] = useState(false);
  const [addVisible, setAddVisible] = useState(false);
  const [roomId, setRoomId] = useState(undefined);

  const { data, error, loading } = useRequest(() => get_box_status({}), {
    pollingInterval: 5 * 60 * 1000,
    pollingWhenHidden: false,
    refreshDeps: [obj.refresh],
  });
  console.log(data, 'data=');

  const RoomLi = (props: { row: any; content: any; index: number }) => {
    const { row, content, index } = props;
    const [indexRoom, setIndexRoom] = useState(0);
    const BoxTitleElement = (
      <div>
        包厢：{row.box_name}（
        {content?.length > row.box_bunk
          ? row.box_bunk || 0
          : content?.length || 0}{' '}
        / {row.box_bunk}人）
      </div>
    );
    return (
      <React.Fragment key={index}>
        {content && content?.length > 0 ? (
          <div className="room-li">
            {BoxTitleElement}
            <div>项目：{content[indexRoom].project_name}</div>
            <div>技师：{content[indexRoom].staff_name}</div>
            <div>
              <span style={{ marginRight: 5 }}>状态：进行中， 剩余</span>
              <CountDown total={content[indexRoom].during_time} />
            </div>
            <div className="room-footer">
              <span className="room-switch">
                <span
                  onClick={(e) => {
                    e.stopPropagation();
                    if (indexRoom === 0) return;
                    setIndexRoom(indexRoom - 1);
                  }}
                >
                  <LeftCircleFilled
                    disabled
                    className={indexRoom === 0 ? 'disabled' : ''}
                  />
                </span>
                <span
                  onClick={(e) => {
                    e.stopPropagation();
                    if (indexRoom + 1 === content?.length) return;
                    setIndexRoom(_.cloneDeep(indexRoom) + 1);
                  }}
                >
                  <RightCircleFilled
                    disabled
                    className={
                      indexRoom + 1 === content?.length ? 'disabled' : ''
                    }
                  />
                </span>
              </span>
              <span
                className="clear"
                onClick={(e) => {
                  e.stopPropagation();
                  Modal.confirm({
                    title: '清空操作！',
                    content: '你确定要清空该数据？',
                    onOk: async () => {
                      await cancel_schedule({
                        schedule_id: content[indexRoom].schedule_id,
                      });
                      message.success('取消成功！');
                      setObj({ refresh: Symbol() });
                    },
                  });
                }}
              >
                <DeleteOutlined />
                清空
              </span>
            </div>
          </div>
        ) : (
          <div
            className="room-li empty-li "
            onClick={() => {
              // setVisible(true);
            }}
          >
            {BoxTitleElement}
            <div className="empty">空闲</div>
          </div>
        )}
      </React.Fragment>
    );
  };

  return (
    <Card title="房态图" className="home-container">
      <div className="room">
        {_.map(data?.results, (row, index) => {
          const content = JSON.parse(row.content);
          let indexRoom = 0;
          return <RoomLi row={row} content={content} index={index} />;
        })}

        {/* <div
          className="room-li add-room"
          onClick={() => {
            setAddVisible(true);
          }}
        >
          <PlusOutlined />
        </div> */}
      </div>
      {/* <Title>今日上班技师</Title>
      <div className="staff">
        <div className="staff-li">Aiden</div>
        <div className="staff-li">Aiden</div>
        <div className="staff-li">Aiden</div>
      </div>
      <AddRoomModal visible={addVisible} close={() => setAddVisible(false)} /> */}
    </Card>
  );
};
export default Home;
